import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  TextInput,
  DeviceEventEmitter,
} from 'react-native';

import { changeStoreAddress, changeStAddress } from '../../actions/myAction';

import PxToDp from '../../utils/PxToDp';

class FullStoreName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      storeAddress: '',
    };
  }
  _goBack() {
    this.props.navigator.pop();
  }
  _completed(storeAddress) {
    const { dispatch } = this.props;
    dispatch(changeStoreAddress(storeAddress));
    dispatch(changeStAddress(storeAddress));
    DeviceEventEmitter.emit('showToast', '修改店铺地址成功！');
    if (navigator) {
      this.props.navigator.pop();
    }
  }
  render() {
    const { storeAddress } = this.props;

    return (
      <View style={[styles.flex, styles.bgColor]}>
        <View style={styles.header}>
          <TouchableOpacity
            style={[styles.btn, styles.backBtn]}
            activeOpacity={0.8}
            onPress={() => this._goBack()}
          >
            <Image source={require('../../img/go_back.png')} />
          </TouchableOpacity>
          <View style={[styles.btn]}>
            <Text style={[styles.title]}>店铺地址</Text>
          </View>
          <TouchableOpacity
            style={[styles.btn, styles.comBtn]}
            activeOpacity={0.8}
            onPress={() => this._completed(this.state.storeAddress)}
          >
            <Text style={[styles.completed]}>完成</Text>
          </TouchableOpacity>
        </View>
        <TextInput
          defaultValue={storeAddress}
          multiline
          maxLength={130}
          style={[styles.textArea]}
          onChangeText={text => this.setState({ storeAddress: text })}
          underlineColorAndroid="transparent"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  bgColor: {
    backgroundColor: '#f7f8fa',
  },
  header: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    height: PxToDp(46),
    backgroundColor: '#fff',
  },
  btn: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  backBtn: {
    paddingLeft: PxToDp(10),
    paddingRight: PxToDp(30),
  },
  comBtn: {
    paddingRight: PxToDp(20),
    paddingLeft: PxToDp(30),
  },
  title: {
    color: '#121212',
    fontSize: PxToDp(18),
  },
  completed: {
    color: '#458fff',
    fontSize: PxToDp(18),
  },
  textArea: {
    marginTop: PxToDp(20),
    paddingLeft: PxToDp(15),
    paddingRight: PxToDp(15),
    paddingTop: PxToDp(2),
    width: '100%',
    height: PxToDp(136),
    color: '#333',
    backgroundColor: '#fff',
    fontSize: PxToDp(16),
    textAlignVertical: 'top',
  },
});
export default FullStoreName;
